<script setup>
/**
 * @name 图文剪辑成片
 */
import {ref, reactive, onMounted, computed} from 'vue'
import request from "@/common/utils/request";

// 清理扩容组件
import kuarong from "@/views/shotstack/MaterialCenter/modules/kuarong.vue";
const kuarongRef = ref()

import CleaningModal from "@/views/shotstack/MaterialCenter/modules/CleaningModal.vue";

// 发布抽屉
import ImageTextIssue from './modules/ImageTextIssue.vue'
const ImageTextIssueRef = ref()

import { graphic_columns } from './modules/index.js'

import {EyeOutlined} from '@ant-design/icons-vue'

const state = reactive({
  // 已使用空间
  capacityFormat: "",
  // 免费空间
  capacityToTalFormat: "",
  // 已使用空间百分比
  percent: 0,
  time: [],
    // 清理内存开关
  visibleCleaning: false,

  // table loading
  serchLoding: false,

  // 勾选的 keys
  selectedRowKeys:[],

  // 图文剪辑素材列表
  GraphicEditingFilmList: [],
  // 预览图片弹窗
  viewImgvisible: false,
  // 预览的图片链接
  imgUrl:''
})

const formState = reactive({
  page: 1,
  pageSize: 10,
  total:0
})

const resetSerch = () => {
  Object.assign(formState, {
    page: 1,
    pageSize: 10,
    total:0
  });
  state.time = []
  getList()
}

const serch = () => {
  formState.page = 1
  getList()
}

// table 勾选函数
const onSelectChange = (selectedRowKeys) => {
  console.log("selectedRowKeys changed: ", selectedRowKeys);
  state.selectedRowKeys = selectedRowKeys;
};

// 获取图文成片列表项
const getList = async () => {
  state.serchLoding = true
  try {
    const params = {
      ...formState,
      start_date: state.time?.[0],
      end_date: state.time?.[1],
    }
   const res = await request.get("/work_ai", "/user/image/clip/hight/list", params)
    console.log(res, '图文剪辑列表数据');
  
    state.GraphicEditingFilmList = res.result.data
    formState.total = res.result.total
    
  } finally {
    state.serchLoding = false
  }
  
}

// 表格 分页数据
const pagination = computed(() => ({
        total: formState.total,
        current: formState.page,
        pageSize: formState.pageSize,
        showSizeChanger: true,
}));

// 翻页
const handleTableChange = (pager) => {
    formState.page = pager.current;
    formState.pageSize = pager.pageSize;
    getList();
};

const itemClick = (item) => {
  state.imgUrl = item.media?.material_url
  state.viewImgvisible = true
}

// 获取剩余空间
const getCapacity = () => {
  request.get("/work_ai", "/user/shotstack/media/capacity").then((res) => {
    state.capacityFormat = res.capacityFormat;
    state.capacityToTalFormat = res.capacityToTalFormat;
    if (res.capacityToTalBytes >= 1) {
      state.percent = +(
        (Number(res.capacityBytes) / Number(res.capacityToTalBytes)) *
        100
      ).toFixed(1);
      return
    } 
    state.percent = 100
  });
};

// 当前勾选的素材
const selectItems = computed(() => {
  return state.GraphicEditingFilmList.filter((item) =>
    state.selectedRowKeys.includes(item.id)
  );
});

// 发布
const issue = (record) => {
  console.log('发布的数据', record);
  ImageTextIssueRef.value?.open({
    business_id:[record.id]
  })
}

// 勾选多组进行发布
const batchIssue = () => {
  console.log(state.selectedRowKeys,'勾选发布的项???');
  
  ImageTextIssueRef.value?.open({
    business_id:state.selectedRowKeys
  })
}

// 扩容
const addMater = () => {
      kuarongRef.value?.showModal();
};

// 关闭内存弹窗
const onSubmitClean = () => {
    state.visibleCleaning = false;
  getCapacity();
};

// 去下载中心
const goDowloadCenter = () => {
  router.push({
    name: "Download",
  });
};

onMounted(() => {
  getCapacity()
  getList()
})
</script>

<template>
    <div class="GraphicEditingFilm">

            <!-- 顶部内容 -->
    <div class="title_box">
      <div class="memory">
        <a-row justify="space-between" align="middle">
          <a-col style="cursor: pointer; margin-right: 30px">
            <a-tooltip>
              <template #title
                >免费空间： {{ state.capacityToTalFormat }}
              </template>
              {{ state.capacityFormat }} / {{ state.capacityToTalFormat }}
              <span :style="percent >= 100 ? 'color: red' : 'color: #666'">
                (已使用: {{ (state.percent < 1 ? 1 : state.percent) + "%" }})
              </span>
            </a-tooltip>
          </a-col>
          <a-space>
            <a-col style="cursor: pointer" @click="state.visibleCleaning = true"
              ><delete-outlined style="margin-right: 5px" />清理</a-col
            >
            <a-col style="cursor: pointer" @click="addMater"
              ><inbox-outlined style="margin-right: 5px" />扩容</a-col
            >
            <a-col style="cursor: pointer" @click="goDowloadCenter"
              ><arrow-down-outlined class="qingli" />下载中心
            </a-col>
          </a-space>
        </a-row>
      </div>
    </div>

            <!-- 头部的搜索栏 -->
    <div class="serch_title">
      <div class="serch_left">

        <!-- @change="(e) => e.type == 'click' && getMediaList()" -->
        <!-- <div class="serch_item" v-if="false">
          <span class="left_prefix">剪辑名称</span>
          <a-input
            class="input_self"
            allow-clear
            style="width: 229px"
            v-model:value="state.keyword"
            placeholder="请输入关键字搜索"
          >
          </a-input>
        </div> -->

        <div class="serch_item">
          <span class="left_prefix">创建时间</span>
          <a-range-picker
            class="input_timer"
            format="YYYY-MM-DD"
            valueFormat="YYYY-MM-DD"
            style="width: 229px"
            v-model:value="state.time"
            show-time
          />
        </div>

        <a-button
          type="primary"
          :loading="state.serchLoding"
          @click="serch"
          >查询</a-button
        >
        <a-button :loading="state.serchLoding" @click="resetSerch"
          >重置</a-button
        >
      </div>
    </div>


    <div class="content_box">
        <!-- 素材列表 -->

        <a-table
          style="margin-top: 20px"
          :pagination="pagination"
          :columns="graphic_columns"
          :data-source="state.GraphicEditingFilmList"
          :loading="state.serchLoding"
          :row-selection="{
            selectedRowKeys: state.selectedRowKeys,
            onChange: onSelectChange,
          }"
          rowKey="id"
          @change="handleTableChange"
        >
          <template #bodyCell="{ column, record }">
            <!-- 素材 -->
            <template v-if="column.dataIndex === 'material_url'">
              <div class="video_box">
                <div class="video_left" style="width: 90px; height: 90px; overflow: hidden; display: flex; justify-content: center;">
                  <EyeOutlined  class="toView" @click="itemClick(record)">
                  </EyeOutlined>
                  <img class="img_style" style="object-fit: cover;"  :src="record.media?.material_url" alt="">
                </div>
                <div class="video_right">
                  <span class="video_name">{{ record.material_name }}</span>
                  <!-- <span class="video_id">{{ record.task_name }}</span> -->
                </div>
              </div>
            </template>

            <template v-if="column.dataIndex === 'pingtai'">
              <!-- <template v-if="true"> -->
              <template v-if="record?.relation?.length">
                <div class="pintai_list">
                  <div
                    class="pintai_itme"
                    v-for="item in record.relation"
                    :key="item.key"
                  >
                    <a-tooltip placement="topLeft">
                      <template #title>
                        <span>{{ item.value }}</span>
                      </template>
                      <img :src="item.image" alt="" />
                    </a-tooltip>
                  </div>
                </div>
              </template>
              <template v-else>
                <span>未发布</span>
              </template>
            </template>

            <template v-if="column.dataIndex === 'edit'">
              <a-dropdown v-if="false" :placements="bottomRight">
                <template #overlay>
                  <a-menu style="margin-left: 20px">
                    <template
                      v-for="(account, index) in state.accountList"
                      :key="account.key"
                    >
                      <template
                        v-if="
                          record.relation.some((ele) => ele.key == account.key)
                        "
                      >
                        <a-menu-item :disabled="true">
                          <div class="account_item">
                            <img :src="account.image" alt="" /><span>{{
                              account.value
                            }}</span>
                          </div>
                        </a-menu-item>
                      </template>

                      <template v-else>
                        <a-menu-item>
                          <div
                            class="account_item"
                            @click="go_DY_item(account, record)"
                          >
                            <img :src="account.image" alt="" /><span>{{
                              account.value
                            }}</span>
                          </div>
                        </a-menu-item>
                      </template>
                    </template>
                  </a-menu>
                </template>
              </a-dropdown>
              <a-button type="link"
              @click="issue(record)"
                >发布
                <!-- <DownOutlined /> -->
              </a-button>
              <!-- <a-button type="link" @click="downloadFille('item', record)"
                >下载</a-button
              > -->
              <!-- <a-button type="link" @click="addTag(record)">标签</a-button> -->
              <a-button type="link" @click="deleteClick(record)">删除</a-button>
            </template>
          </template>
        </a-table>
        <div class="control_btns" v-if="selectItems.length">
          <div class="all_choose">
            <!-- <a-checkbox
              :checked="isCheckedAll()"
              @change="checkedAllFn"
              style="margin-right: 10px"
            />
            全选 -->
            <div class="all_choose_text">
              已选择 {{ selectItems.length }} 个图文
            </div>
          </div>
          <a-button @click="batchIssue" :disabled="!selectItems.length" type="primary"
            >发布至平台
          </a-button>
          <a-button :disabled="!selectItems.length" danger @click="deleteItems"
            >删除</a-button
          >
        </div>
      </div>


  </div>
  
  
  <kuarong
  :capacityToTalFormat="state.capacityToTalFormat"
  :ref="el => kuarongRef=el"
></kuarong>
    <!-- 清理内存 -->
    <CleaningModal
        :visible="state.visibleCleaning"
        @onCancel="state.visibleCleaning = false"
        @onSubmit="onSubmitClean"
    />

    <!-- 图片预览 -->
    <a-modal v-model:visible="state.viewImgvisible" title="图片预览" @ok="handleOk">
      <div class="view_img_content" :key="videoUrl">
        <img :src="state.imgUrl" alt="" />
      </div>

      <template #footer>
        <a-button @click="state.viewImgvisible = false">关闭</a-button>
      </template>

    </a-modal>

    <!-- 发布抽屉 -->
    <ImageTextIssue ref="ImageTextIssueRef" useType="图片成片"></ImageTextIssue>

</template>


<style lang="less" scoped>
.view_img_content {
width: 100%;
height: 500px;
display: flex;
justify-content: center;
background: #000000;

img {
height: 100%;
width: 100%;
object-fit: contain;
}
}

// 发布按钮
.control_btns {
    position: fixed;
    bottom: 0;
    display: flex;
    gap: 8px;
    transition: opacity 0.4s;
    background-color: #fff;
    align-items: center;
    padding: 20px;
    box-shadow: 0px 12px 16px rgba(0, 0, 0, 0.12),
      0px 6px 8px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
  }

.GraphicEditingFilm{
    padding: 0 20px;
    padding-left: 0;
    min-width: 1380px;


      // 最头部标题和剩余空间
  .title_box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }


      // 第二层 搜索容器
  .serch_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 10px;
    margin-bottom: 20px;

    .serch_left {
      display: flex;
      gap: 0 10px;

      .serch_item {
        display: flex;
        justify-content: center;
        align-items: center;

        .left_prefix {
          padding: 0 25px;
          background-color: #ffffff;
          line-height: 30px;
          border: 1px solid #d9d9d9;
          border-right: none;
        }
      }
    }
  }

    // 主要的项目列表和素材列表
    .content_box {
    // 头部项目选择列表
    .list_item_box {
      margin: 25px 0;
      display: flex;
      justify-content: space-between;

      .list_item_content_box {
        flex: 1;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .list_item_title {
          padding: 2px 0;
          margin-right: 20px;
          cursor: pointer;
          white-space: nowrap;
          /* 强制文本在一行内显示 */
          overflow: hidden;
          /* 超出部分隐藏 */
          text-overflow: ellipsis;
          /* 超出部分显示省略号 */
          max-width: 21ch;

          /* 限制文本显示的最大字符数为10 */
          span {
            font-size: 15px;
            color: #aaaaaa;

            &.active_span {
              color: #222222;
              font-weight: 600;
            }

            &:hover {
              color: #222222;
              font-weight: 600;
            }
          }
        }
      }

      .switchover {
        min-width: 71px;
        padding: 5px 25px;
        cursor: pointer;
        display: flex;
        align-items: start;
      }
    }

    // table样式
    .video_box {
      display: flex;
      gap: 5px;

      .video_left {
        position: relative;
        // background-color: #000;

        // 预览小眼睛
        .toView {
          position: absolute;
          top: 35%;
          left: 50%;
          z-index: 9;
          opacity: 0;
          transition: all 0.3s;
          font-size: 25px;
          color: #fff;
          transform: translate(-50%);
          cursor: pointer;

          &:hover {
            color: rgb(0, 140, 255);
          }
        }

        .img_style{
          position: relative;
        }
        &::after {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          width: 90px;
          height: 90px;
          background: transparent;
          cursor: pointer;
          transition: all 0.3s;
        }

        &:hover {
          &::after {
            background: rgba(0, 0, 0, 0.5);
          }
          .toView {
            opacity: 1;
          }

        }


        video {
          height: 90px;
          width: 90px;
        }

        img {
          width: 90px;
          height: 90px;
          aspect-ratio: auto;
        }
      }

      .video_right {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .video_name {
          font-weight: 600;
          font-size: 15px;
        }

        .video_id {
          color: #525252;
          font-size: 14px;
        }
      }
    }

    .pintai_list {
      display: flex;
      gap: 10px;

      .pintai_itme {
        cursor: pointer;

        img {
          height: 30px;
          object-fit: contain;
        }
      }
    }
  }

}
</style>